<template>
    <div id="con" class="image-box" :style="{ borderRadius: `${data.rpxStyle['border-radius']}px` }" v-if="data.data.data && data.data.data.length > 0">
        <!-- 一行一个 -->
        <div class="image-one flexs" v-if="data.style.type == 1" :style="{ borderRadius: `${data.rpxStyle['border-radius']}px` }">
            <img :src="data.data.data[0].url" v-if="data.data.data[0].url" @load="img_load" />
            <div class="img-none cls-center" v-else>
                <el-icon color="#c8c9cc" size="40px"><PictureFilled /></el-icon>
                <p class="img-none__text">请添加图片</p>
            </div>
        </div>
        <!-- 一行两个或一行三个 -->
        <div class="image-two" v-if="data.style.type == 2 || data.style.type == 3">
            <template v-for="(item, index) in data.data.data" :key="index">
                <div :class="[{ 'spac-one': data.style.showSpac }, 'image-item cls-center']" :style="itemWidth">
                    <img :src="item.url" v-if="item.url" @load="img_load" />
                    <div class="img-none cls-center" v-else>
                        <el-icon color="#c8c9cc" size="40px"><PictureFilled /></el-icon>
                        <p class="img-none__text">请添加图片</p>
                    </div>
                </div>
            </template>
        </div>
        <!-- 一左二右 -->
        <div
            class="image-three"
            :style="{ height: `${data.style.img_height}px` }"
            v-if="data.style.type == 4"
        >
            <template v-for="(item, index) in data.data.data" :key="item.name">
                <div
                    :class="[{ 'spac-two': data.style.showSpac }, 'image-item cls-center']"
                    :style="{
                        height: index == 0 ? `${data.style.img_height}px` : '50%',
                        borderRadius: `${data.rpxStyle['border-radius']}px`,
                    }"
                >
                    <img :src="item.url" v-if="item.url" @load="img_load" />
                    <div class="img-none cls-center" v-else>
                        <el-icon color="#c8c9cc" size="40px"><PictureFilled /></el-icon>
                        <p class="img-none__text">请添加图片</p>
                    </div>
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, computed, onMounted } from "vue"
import { PictureFilled } from "@element-plus/icons-vue"

const { proxy } = getCurrentInstance()

/**
 * 图片广告
 * @property {Object} data  数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 9,
            type_name: "img_ad",
            text: "图片广告",
            style: {
                type: 1, // 1是一行一个，2是一行两个，3是一行三个，4是一左二右
            },
            data: {
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
                data: [],
            },
        },
    },
})

onMounted(() => {
    // document.getElementById('con').addEventListener('resize',e=>{
    //     console.log('con resize',e);
    // })
})

const itemWidth = computed(() => {
    let size = parseInt(100 / props.data.data.data.length)
    return `width:${size}%;border-radius:${props.data.rpxStyle["border-radius"]}px`
})
const img_load = (e) => {
    // console.log('img_load',e);
    let con = document.getElementById("con")
    props.data.style.img_height = con.offsetHeight
    // console.log(con.offsetHeight);
    // console.log(con.clientHeight);
}
</script>

<style lang="less" scoped>
.spac-one {
    margin-right: 8px;
    &:last-child {
        margin-right: 0;
    }
}
.image-box {
    overflow: hidden;
}
.image-two {
    display: flex;
}
.image-item {
    flex: 1;
    display: flex;
    overflow: hidden;
    img {
        width: 100%;
        height: 100%;
    }
}
.image-three {
    position: relative;
    max-width: 375px;
    overflow: hidden;
    .image-item {
        flex: none;
        &:first-child {
            width: 50%;
            left: 0px;
            top: 0px;
            position: absolute;
        }
        &:nth-of-type(2) {
            position: absolute;
            left: 50%;
            top: 0px;
            width: 50%;
        }
        &:last-child {
            width: 50%;
            left: 50%;
            top: 50%;
            position: absolute;
        }
    }
    .spac-two {
        &:first-child {
            width: calc(50% - 4px);
        }
        &:nth-of-type(2) {
            left: calc(50% + 4px);
            width: calc(50% - 4px);
            height: calc(50% - 4px) !important;
        }
        &:last-child {
            width: calc(50% - 4px);
            left: calc(50% + 4px);
            top: calc(50% + 4px);
            height: calc(50% - 4px) !important;
        }
    }
}
.img-none {
    width: 100%;
    height: 80px;
    overflow: hidden;
    flex-direction: column;
    .img-none__text {
        flex: none;
        width: 100%;
        font-size: 14px;
        color: #969799;
        text-align: center;
    }
}
</style>
